import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import {
  Table,
  Card,
  Tag,
  Form,
  Row,
  Col,
  Select,
  InputNumber,
  Input,
  DatePicker,
  Button,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
const FormItem = Form.Item;
const Option = Select.Option;
const screenState = ["未做", "已做"]
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk, apply }) => ({
  risk, apply
}))
@Form.create()
export default class AlonePreCheckList extends PureComponent {
  state = {
    createTimeStart: '', 
    createTimeEnd: '',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/fetchApply',
      payload: {
        offset: 0,
        limit: 10,
      },
    });
  }

  tableColumns = [
    { title: '业务编号', dataIndex: 'bizNum', key: 'bizNum' },
    { title: '客户姓名', dataIndex: 'custName', key: 'custName' },
    { title: '手机号', dataIndex: 'phone', key: 'phone' },
    {
      title: '征信筛查', dataIndex: 'screenState', key: 'screenState',
      render(val) {
        switch (val) {
          case 0:
            return <Tag color="red">{screenState[val]}</Tag>
          case 1:
            return <Tag color="green">{screenState[val]}</Tag>
        }
      },
    },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
    {
      title: '操作',
      render: (text, reacd) => (
        <Fragment>
          <Link to={`/risk/alonePreCheckDetail?id=${reacd.id}&type=${reacd.screenState == 0 ? 0 : 1}`}>{reacd.screenState == 0 ? '初筛' : '详情'}</Link>
        </Fragment>
      ),
    },
  ];

  handleSearch = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        // console.log("23123123",values)
        dispatch({
          type: 'apply/fetchApply',
          payload: {
            ...values,
            createTimeBegin: this.state.createTimeStart,
            createTimeEnd: this.state.createTimeEnd,
            offset: 0,
            limit: 10,
          },
        });
      }
    });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'apply/fetchApply',
      payload: {
        offset: 0,
        limit: 10,
      },
    });
  };

  handleCreateTimeChange = (dates, dateString) => {
    this.setState({
      createTimeStart: dateString[0],
      createTimeEnd: dateString[1],
    });
  };

  handleStandardTableChange = e => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        
        dispatch({
          type: 'apply/fetchApply',
          payload: {
            ...values,
            createTimeBegin: this.state.createTimeStart,
            createTimeEnd: this.state.createTimeEnd,
            offset: (e.current - 1) * e.pageSize,
            limit: e.pageSize,
          },
        });
      }
    });
  };

  render() {
    const { apply: { applyList, applyLoading, applyPage } } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <PageHeaderLayout title="业务初筛">
        {/* {JSON.stringify(applyList)} */}
        <Card>
        <Form onSubmit={this.handleSearch}>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="客户姓名" {...formItemLayout}>
                  {getFieldDecorator('custName', {})(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="业务编号" {...formItemLayout}>
                  {getFieldDecorator('bizNum', {})(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="电话号码" {...formItemLayout}>
                  {getFieldDecorator('phone', {})(
                    <InputNumber placeholder="请输入" style={{width:'100%'}}/>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="筛查状态" {...formItemLayout}>
                  {getFieldDecorator('screenState', {})(
                    <Select placeholder="请选择" style={{ width: '100%' }} allowClear>
                      <Option value="0">未做</Option>
                      <Option value="1">已做</Option>
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="创建时间" {...formItemLayout}>
                  {getFieldDecorator('createTime', {})(
                    <DatePicker.RangePicker
                      style={{ width: '100%' }}
                      onChange={this.handleCreateTimeChange}
                    />
                  )}
                </FormItem>
              </Col>
              <Col md={8} sm={24} />
              <Col md={8} sm={24}>
                <div style={{ textAlign: 'right' }}>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                  <Button
                    type="normal"
                    style={{ marginLeft: '16px' }}
                    onClick={this.handleFormReset}
                  >
                    重置
                  </Button>
                </div>
              </Col>
            </Row>
          </Form>
          <Table
            rowKey="id"
            loading={applyLoading}
            pagination={applyPage}
            dataSource={applyList}
            columns={this.tableColumns}
            onChange={this.handleStandardTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
